<template>
  <div class="main">
    <div class="tabBox">
      <div :class="{ tab_item: true, active: tabActive === 1 }" @click="tabActive = 1">
        硬件设置
      </div>
      <div :class="{ tab_item: true, active: tabActive === 2 }" @click="tabActive = 2">
        软件设置
      </div>
    </div>
    <div class="con">
      <HardwareSettings v-if="tabActive === 1" />
      <SoftwareSettings v-if="tabActive === 2" />
    </div>
    <div class="bottomBox"><el-button size="large" type="primary">保存</el-button></div>
  </div>
</template>

<script lang="ts" setup>
import SoftwareSettings from './SoftwareSettings.vue'
import HardwareSettings from './HardwareSetting.vue'
import { ref } from 'vue'

const tabActive = ref(1)
</script>

<style scoped lang="less">
.main {
  padding: 10px;
  padding-bottom: 60px;
}
.tabBox {
  display: flex;
  .tab_item {
    background: #ffffff;
    border-radius: 16px 16px 0px 0px;
    font-size: 24px;
    color: #8083a3;
    line-height: 33px;
    text-align: center;
    padding: 12px 54px;
    transition: all 0.3s;
    cursor: pointer;
  }
  .active {
    background: #3c88ff;
    border-radius: 16px 16px 0px 0px;
    color: #ffffff;
    transition: all 0.3s;
  }
}
.con {
  background: #ffffff;
  border-radius: 0px 16px 16px 16px;
  padding: 24px;
  width: 100%;
  height: calc(100vh - 240px);
  overflow: auto;
}
.bottomBox {
  position: fixed;
  bottom: 0px;
  left: 0;
  width: 100%;
  text-align: center;
  background: #fff;
  box-shadow: 0px -1px 4px 3px rgba(105, 143, 249, 0.1);
  padding: 10px 0;
}
</style>
